<script setup name="Notice" lang="ts">
import { parseTime } from '../../../utils/ruoyi.ts'
import { addNotice, delNotice, getNotice, listNotice, updateNotice } from '@/api/system/notice'
import type { NoticeForm, NoticeQuery, NoticeVO } from '@/api/system/notice/types'

const { proxy } = getCurrentInstance() as ComponentInternalInstance
const { sys_notice_status, sys_notice_type } = toRefs<any>(proxy?.useDict('sys_notice_status', 'sys_notice_type'))

const noticeList = ref<NoticeVO[]>([])
const loading = ref(true)
const ids = ref<Array<string | number>>([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const message = useMessage()
const modal = useModal()
const queryFormRef = ref()
const noticeFormRef = ref()

const dialog = reactive<DialogOption>({
  visible: false,
  title: '',
})

const initFormData: NoticeForm = {
  noticeId: undefined,
  noticeTitle: '',
  noticeType: '',
  noticeContent: '',
  status: '0',
  remark: '',
  createByName: '',
}
const data = reactive<PageData<NoticeForm, NoticeQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    noticeTitle: '',
    createByName: '',
    status: '',
    noticeType: '',
  },
  rules: {
    noticeTitle: [{ required: true, message: '公告标题不能为空', trigger: 'blur' }],
    noticeType: [{ required: true, message: '公告类型不能为空', trigger: 'change' }],
  },
})

const { queryParams, form, rules } = toRefs(data)

/** 查询公告列表 */
async function getList() {
  loading.value = true
  const res = await listNotice(queryParams.value)
  noticeList.value = res.rows
  total.value = res.total
  loading.value = false
}
/** 取消按钮 */
function cancel() {
  reset()
  dialog.visible = false
}
/** 表单重置 */
function reset() {
  form.value = { ...initFormData }
  noticeFormRef.value?.resetFields()
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}
/** 重置按钮操作 */
function resetQuery() {
  queryFormRef.value?.resetFields()
  handleQuery()
}
/** 多选框选中数据 */
function handleSelectionChange(selection: NoticeVO[]) {
  ids.value = selection.map(item => item.noticeId)
  single.value = selection.length !== 1
  multiple.value = !selection.length
}
/** 新增按钮操作 */
function handleAdd() {
  reset()
  dialog.visible = true
  dialog.title = '添加公告'
}
/** 修改按钮操作 */
async function handleUpdate(row?: NoticeVO) {
  reset()
  const noticeId = row?.noticeId || ids.value[0]
  const { data } = await getNotice(noticeId)
  Object.assign(form.value, data)
  dialog.visible = true
  dialog.title = '修改公告'
}
/** 提交按钮 */
function submitForm() {
  noticeFormRef.value?.validate().then(async (valid: boolean) => {
    if (valid) {
      form.value.noticeId ? await updateNotice(form.value) : await addNotice(form.value)
      message.success('修改成功')
      dialog.visible = false
      await getList()
    }
  })
}
/** 删除按钮操作 */
async function handleDelete(row?: NoticeVO) {
  const noticeIds = row?.noticeId || ids.value
  modal.confirm({
    title: `是否确认删除公告编号为"${noticeIds}"的数据项？`,
    onOk: async () => {
      await delNotice(noticeIds)
      getList()
      message.success(`删除成功`)
    },
    onCancel: () => {

    },
  })
}

onMounted(() => {
  getList()
})
</script>

<template>
  <div class="p-2">
    <a-card class="mb-20px">
      <div class="flex flex-between">
        <div>
          <a-form ref="queryFormRef" layout="inline" :model="queryParams" :inline="true">
            <a-form-item label="公告标题" prop="noticeTitle">
              <a-input v-model:value="queryParams.noticeTitle" placeholder="请输入公告标题" clearable style="width: 200px" @keyup.enter="handleQuery" />
            </a-form-item>
            <a-form-item label="操作人员" prop="createByName">
              <a-input v-model:value="queryParams.createByName" placeholder="请输入操作人员" clearable style="width: 200px" @keyup.enter="handleQuery" />
            </a-form-item>
            <a-form-item label="类型" prop="noticeType">
              <a-select v-model:value="queryParams.noticeType" placeholder="公告类型" clearable style="width: 200px">
                <a-select-option v-for="dict in sys_notice_type" :key="dict.value" :label="dict.label" :value="dict.value">
                  {{ dict.label }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item>
              <a-space>
                <a-button type="primary" @click="handleQuery">
                  搜索
                </a-button>
                <a-button @click="resetQuery">
                  重置
                </a-button>
              </a-space>
            </a-form-item>
          </a-form>
        </div>
        <div>
          <a-row :gutter="10">
            <a-col :span="1.5">
              <a-button v-hasPermi="['system:notice:add']" type="primary" @click="handleAdd">
                新增
              </a-button>
            </a-col>
          </a-row>
        </div>
      </div>
    </a-card>

    <a-card shadow="hover">
      <a-table :data-source="noticeList" :pagination="false" @selection-change="handleSelectionChange">
        <a-table-column title="公告标题" align="left" data-index="noticeTitle" :ellipsis="true" />
        <a-table-column title="公告类型" align="center" data-index="noticeType" width="100">
          <template #default="{ record }">
            <bh-dict-tag :options="sys_notice_type" :value="record.noticeType" />
          </template>
        </a-table-column>
        <a-table-column title="状态" align="center" data-index="status" width="100">
          <template #default="{ record }">
            <bh-dict-tag :options="sys_notice_status" :value="record.status" />
          </template>
        </a-table-column>
        <a-table-column title="创建者" align="center" data-index="createByName" width="100" />
        <a-table-column title="创建时间" align="center" data-index="createTime" width="100">
          <template #default="{ record }">
            <span>{{ parseTime(record.createTime, '{y}-{m}-{d}') }}</span>
          </template>
        </a-table-column>
        <a-table-column title="操作" align="center" class-name="small-padding fixed-width">
          <template #default="{ record }">
            <a-tooltip content="修改" placement="top">
              <a-button v-hasPermi="['system:notice:edit']" type="link" @click="handleUpdate(record)">
                修改
              </a-button>
            </a-tooltip>
            <a-tooltip content="删除" placement="top">
              <a-button v-hasPermi="['system:notice:remove']" type="link" @click="handleDelete(record)">
                删除
              </a-button>
            </a-tooltip>
          </template>
        </a-table-column>
      </a-table>

      <div class="text-right mt-20px">
        <a-pagination
          v-show="total > 0"
          v-model:current="queryParams.pageNum" v-model:pageSize="queryParams.pageSize" :total="total"
          show-less-items @change="getList"
        />
      </div>
    </a-card>
    <!-- 添加或修改公告对话框 -->
    <a-modal v-model:open="dialog.visible" :title="dialog.title" width="780px" append-to-body>
      <a-form ref="noticeFormRef" :model="form" :rules="rules" laba-width="80px">
        <a-row :gutter="10">
          <a-col :span="12">
            <a-form-item label="公告标题" name="noticeTitle">
              <a-input v-model:value="form.noticeTitle" placeholder="请输入公告标题" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="公告类型" name="noticeType">
              <a-select v-model:value="form.noticeType" placeholder="请选择">
                <a-select-option v-for="dict in sys_notice_type" :key="dict.value" :label="dict.label" :value="dict.value">
                  {{ dict.label }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="状态">
              <a-radio-group v-model:value="form.status">
                <a-radio v-for="dict in sys_notice_status" :key="dict.value" :value="dict.value">
                  {{ dict.label
                  }}
                </a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="内容">
              <a-textarea v-model:value="form.noticeContent" :min-height="192" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <template #footer>
        <div class="dialog-footer">
          <a-button type="primary" @click="submitForm">
            确 定
          </a-button>
          <a-button @click="cancel">
            取 消
          </a-button>
        </div>
      </template>
    </a-modal>
  </div>
</template>
